<script setup>
import { ref, inject, computed, onMounted } from "vue";
import { useStorage } from "@vueuse/core";
import VueOfficePdf from "@vue-office/pdf";

const loading = ref(true);
const index = inject("index");
const filename = inject("filename");

const auth = useStorage("auth");
const member = useStorage("member");
const path = computed(() => {
    return "/api/profile?filename=" + filename.value + "&auth=" + auth.value;
});

onMounted(() => {
    if (auth.value === undefined) {
        router.push({ path: "/user/signin" });
        return;
    }
});

const renderedHandler = () => {
    console.log("渲染完成");
    loading.value = false;
};

const errorHandler = () => {
    console.log("渲染失败");
};
</script>
<template>
    <div class="w-11/12 mx-auto">
        <div
            class="flex flex-col min-h-screen rounded-lg my-14 overflow-hidden relative"
        >
            <div class="sticky top-14 left-0">
                <p
                    class="h-10 leading-10 text-center bg-iso-gray-500 bg-opacity-50 relative"
                >
                    <template v-if="loading">
                        <span class="text-white text-sm"> 加载中... </span>
                    </template>
                    <template v-else>
                        <span class="text-white">{{ filename }} </span>
                    </template>

                    <template v-if="member">
                        <a
                            :href="
                                '/api/profile?filename=' +
                                filename +
                                '&auth=' +
                                auth
                            "
                            target="_blank"
                            class="absolute right-14 top-2.5 text-white cursor-pointer"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                class="size-5"
                            >
                                <path
                                    d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
                                />
                                <path
                                    d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"
                                />
                            </svg>
                        </a>
                    </template>

                    <span
                        class="absolute right-5 top-2.5 text-white cursor-pointer"
                        @click="index = 0"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="size-5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M6 18 18 6M6 6l12 12"
                            />
                        </svg>
                    </span>
                </p>

                <vue-office-pdf
                    :src="path"
                    style="height: 100vh"
                    @rendered="renderedHandler"
                    @error="errorHandler"
                />
            </div>
        </div>
    </div>
</template>
